<template>
  <el-dialog title='添加责任人' v-model="dialogVisible" width="40%" >
    <el-form ref="formRef" class="mb" :model="queryParams" :inline="true" label-width="65px" @submit.prevent>
      <el-form-item label="用户名" prop="nickname">
        <el-input
          clearable
          v-model="queryParams.nickname"
          placeholder="请输入用户名"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
    <el-table
      border
      v-loading="formLoading"
      ref="multipleTableRef"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="工号" align="center" prop="username" />
      <el-table-column label="用户名" align="center" prop="nickname" />
      <el-table-column label="所属部门" align="center" prop="deptName" />
    </el-table>
    </el-scrollbar>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import * as MgmtNcrApi from '@/api/quality/qualitycontrol/QualityMgmtNcr'
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const queryParams = reactive({
  nickname: undefined,
  deptId:undefined,
})
const list = ref([])
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (data) => {
  dialogVisible.value = true
  queryParams.deptId = data
  resetForm()
  getList()
}

const emit = defineEmits(['getResponsiblePerson'])

// 确认
const submitForm = () => {
  if (multipleSelection.value.length > 1) {
    message.notifyError('只能选择一条数据')
    return
  }
  dialogVisible.value = false
  emit('getResponsiblePerson', multipleSelection.value)
  console.log('multipleSelection',multipleSelection.value)
  multipleTableRef.value!.clearSelection()
}

// 获取列表
const getList = async () => {
  formLoading.value = true
  // 供应商API
  console.log('queryParams',queryParams)
  const res = await MgmtNcrApi.getResponsiblePersonList(queryParams)
  list.value = res
  formLoading.value = false
}

// 搜索
const handleQuery = async () => {
  getList()
}

// 重置按钮
const resetQuery = () => {
  formRef.value.resetFields()
  handleQuery()
}

// 多选赋值
const multipleSelection = ref([])
const multipleTableRef = ref()
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

defineExpose({ open, multipleSelection }) // 提供 open 方法，用于打开弹窗

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.mb {
  margin-bottom: 20px;
}

.pagination::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
</style>
